<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewpotrt" content="width=device-width, initial-scale=1.0">
  <title>tt</title>
  <style>
    #canvas {
      border: 1px solid #000000;
    }

    .start-button {
      width: 100px;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      background-color: aquamarine;
      outline: none;
      border-radius: 5px;
      border-width: 0;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <div>
    <span>设置时间：</span>
    <span id="setTime"></span>
    <span class="unit"> 分钟</span>
  </div>
  <button class="start-button">
    开始倒计时
  </button>
  <script src="./classes/utils.js"></script>
  <script src="./classes/ball.js"></script>
  <script src="./classes/arrow.js"></script>
  <script src="./classes/line.js"></script>
  <script src="./classes/text.js"></script>
  <script src="./classes/image.js"></script>
  <script src="./classes/circle.js"></script>
  <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
        imgCanvas = document.getElementById('img'),
        context = canvas.getContext('2d'),
        lineContext = canvas.getContext('2d'),
        ball = new Ball(2),
        angle = 0,
        centerX = canvas.width / 2,
        centerY = canvas.height / 2,
        radius = 100,
        speed = 0.05,
        mouse = utils.captureMouse(canvas),
        ball2 = new Ball(15, '#0022CA', '#4EC6F9'),
        arrow = new Arrow(),
        outerLine = new Line(),
        timeText = new Text(),
        clockwise = false,
        convertTime = 0,
        ballAngle = 0,
        bgCircle = new Circle(),
        ds = 0;

      var setTimeDom = document.getElementById('setTime')
      setTimeDom.innerHTML = 0

      // 初始拖拽的大球
      ball2.x = centerX + Math.cos(-Math.PI / 2) * radius
      ball2.y = centerY + Math.sin(-Math.PI / 2) * radius
      ball2.draw(context)

      // 初始化箭头
      arrow.x = centerX
      arrow.y = centerY
      arrow.draw(context)

      staticBody(context)

      // 拖拽操作
      canvas.addEventListener('mousedown', function (e) {
        if (utils.containsPoint(ball2.getBounds(), mouse.x, mouse.y)) {
          canvas.addEventListener('mousemove', handleGetMouse, false)
        }
      }, false)
      canvas.addEventListener('mouseup', function () {
        typeMouse = false
        canvas.removeEventListener('mousemove', handleGetMouse, false)
      }, false)

      // 监听鼠标移动时是否在球内
      canvas.addEventListener('mousemove', function (e) {
        if (utils.containsPoint(ball2.getBounds(), mouse.x, mouse.y)) {
          canvas.style.cursor = 'pointer'
        } else {
          canvas.style.cursor = 'default'
        }
      }, false)

      // 鼠标移动时操作
      function handleGetMouse() {
        context.clearRect(0, 0, canvas.width, canvas.height)

        // 计算角度
        let dx = mouse.x - centerX
        let dy = mouse.y - centerY
        ds = Math.atan2(dy, dx)
        ballAngle = Math.ceil(ds * 180 / Math.PI)

        if (ballAngle > -90) {
          convertTime = Math.round((ballAngle + 90) / 360 * 60)
        } else if (ballAngle < -140) {
          ballAngle = 180
          ds = ballAngle * Math.PI / 180
          convertTime = Math.round(270 / 360 * 60)
          canvas.removeEventListener('mousemove', handleGetMouse, false)
        } else if (ballAngle < -90) {
          ballAngle = -90
          ds = ballAngle * Math.PI / 180
          convertTime = 0
          canvas.removeEventListener('mousemove', handleGetMouse, false)
        }
        let minRadio = -Math.PI / 2
        if (ds < minRadio) {
          ds = minRadio
        }
        setTimeDom.innerHTML = convertTime

        let lineCount = Math.floor((Math.ceil(ds * 180 / Math.PI) + 90)/6)
        // console.log(lineCount)
        for (var i = 0; i < lineCount + 1; i++) {
          let lineRadio = (i * 6) * Math.PI / 180 - Math.PI/2
          // 绘制线段
          outerLine.x = centerX
          outerLine.y = centerY
          outerLine.rotation = lineRadio
          outerLine.draw(context)
        }


        // 绘制拖动点
        ball2.x = centerX + Math.cos(ds) * radius
        ball2.y = centerY + Math.sin(ds) * radius
        ball2.draw(context)

        // 绘制箭头
        arrow.x = centerX
        arrow.y = centerY
        arrow.rotation = ds
        arrow.draw(context)

        // 绘制圆弧
        context.strokeStyle = '#2289FF'
        context.lineWidth = 10
        context.lineCap = 'round'
        context.imageSmoothingEnabled = true
        context.imageSmoothingQuality = 'high'
        context.beginPath()
        context.arc(centerX, centerY, radius, -Math.PI / 2, ds)
        context.stroke()

        staticBody(context)
      }

      // 倒计时操作
      let startButton = document.getElementsByClassName('start-button')[0]
      startButton.addEventListener('click', function () {
        // context.clearRect(0, 0, canvas.width, canvas.height)

        // // 绘制箭头
        // arrow.x = centerX
        // arrow.y = centerY
        // arrow.rotation = ds
        // arrow.draw(context)

        // context.strokeStyle = '#2289FF'
        // context.lineWidth = 10
        // context.lineCap = 'round'
        // context.imageSmoothingEnabled = true
        // context.imageSmoothingQuality = 'high'
        // context.beginPath()
        // context.arc(centerX, centerY, radius, -Math.PI / 2, ds)
        // context.stroke()

        // staticBody(context)


        let secondTimer = null

        // 分钟倒计时
        let timer = setInterval(function () {
          convertTime--
          setTimeDom.innerHTML = convertTime
          angle2radio(convertTime, ds)
          if (convertTime <= 0) {
            clearInterval(timer)
            clearInterval(secondTimer)
            let unitDom = document.getElementsByClassName('unit')[0]
            unitDom.style.display = 'none'
            setTimeDom.innerHTML = '倒计时结束！'
          }
        }, 10 * 60)

        // 秒钟倒计时
        let totalSecond = 60
        let secondCursor = new Line()
        secondCursor.x = centerX
        secondCursor.y = centerY
        secondCursor.radius = 130
        secondCursor.width = canvas.width
        secondCursor.height = canvas.height
        secondCursor.rotation = (totalSecond * 6) * Math.PI / 180 - (Math.PI / 2)
        secondCursor.draw(context)

        secondTimer = setInterval(function () {
          totalSecond++
          secondCursor.rotation = (totalSecond * 6) * Math.PI / 180 - (Math.PI / 2)
          secondCursor.draw(context)

          if (totalSecond > 119) {
            totalSecond = 60
          }
        }, 10)


      })

      // 指针倒计时 角度转换成弧度
      function angle2radio(timeCount) {
        context.clearRect(0, 0, canvas.width, canvas.height)
        // 补齐余数
        let reminderCount = ballAngle % 6
        console.log('ballAngle:' + ballAngle)
        if (reminderCount !== 0) {
          if (reminderCount < 3) {
            ballAngle = ballAngle - reminderCount
          } else {
            ballAngle = ballAngle - reminderCount + 6
          }
        }

        ballAngle = ballAngle - 6

        let radio = ballAngle * Math.PI / 180

        // 绘制箭头
        arrow.x = centerX
        arrow.y = centerY
        arrow.rotation = radio
        arrow.draw(context)

        // 绘制圆弧
        context.strokeStyle = '#2289FF'
        context.lineWidth = 10
        context.lineCap = 'round'

        context.beginPath()
        context.arc(centerX, centerY, radius, -Math.PI / 2, radio)
        context.stroke()

        staticBody(context)
      }

      function staticBody(ctx) {
        // 绘制外圈
        bgCircle.startRadio = -Math.PI / 2
        bgCircle.endRadio = Math.PI
        bgCircle.color = '#EBFAFF'
        bgCircle.draw(ctx, centerX, centerY)

        // 绘制文本
        timeText.x = centerX
        timeText.y = centerY
        timeText.draw(context, convertTime)
      }

    }
  </script>
</body>

</html>